<template>
    <div class="head_page">
      <van-nav-bar
        title=""
        left-arrow
        @click-left="goBack"
        left-text="返回"
        />

        <div class='headInfo'>
            <div class='headImg'>
                <div class="icon">
                    <img :src="friendInfo.avatar" style='width:100%;height:100%'>
                </div>
                <div class='info'>
                    <div class="username remark">备注:{{friendInfo.remark == ''?'暂无':friendInfo.remark}}</div>
                    <div class="username">近聘昵称:{{friendInfo.nick_name}}</div>
                    <div class="username">近聘账号:{{friendInfo.ids}}</div>
                    <div class="username">手机号:{{friendInfo.mobile}}</div>
                </div>
            </div>
            
            <div class='bz_bq' @click='remark()'>
                <div>备注标签</div>
                <div>></div>
            </div>
            <div class='bz_bq'>
                <div>电话号码</div>
                <div><a :href="'tel:' + friendInfo.mobile1">{{friendInfo.mobile1}}</a>></div>
            </div>
            <!-- <div class='bz_bq' @click="limitFriend()">
                <div>朋友权限</div>
                <div>></div>
            </div> -->
        </div>
        <div class='send' @click="send(friendInfo)">发消息</div>
    </div>
</template>

<script>
  export default {
    name: 'reCharge',
    data(){
      return {
        smtype:true,
        SendUserId:'',
        MessagePage:'person',
        friendInfo:{}
      }
    },
    components:{
     
    },
    activated(){
        this.SendUserId = this.$route.query.SendUserId
        this.getFriendInfo(this.$route.query.SendUserId)
    },
    mounted(){
        
    },
    methods:{
        getFriendInfo(SendUserId){
            let _self = this
            const userInfo = JSON.parse(localStorage.getItem('userInfo')) || ''
            let params = {
                addUserId:userInfo.id||'',   //当前用户id
                addedUserId:SendUserId||''
            }
            this.$api.user.GetFriendInfo(params).then(res => {
              if (res.code === 200) {
                console.log(res)
                console.log(JSON.parse(res.data))
                _self.friendInfo = JSON.parse(res.data)[0] || {}
              }
          })
        },
        remark(){
            let _self = this
            _self.$router.push(
                // { name: 'setRemark', params: { SendUserId: _self.SendUserId }}
                { name: 'setRemark', params: { userDetail:_self.friendInfo }}
            )
        },
       goBack(){
           this.$router.go('-1')
       },
        send(val){
            console.log(val)
            let _self = this
            let data = {
                MessagePage: _self.MessagePage,
                MessageType: "0",
                Mobile: val.mobile,
                Name: val.nick_name,
                Remark: val.remark,
                // SelfRemark: "无",
                UserId: val.id,
                UserImage: val.avatar,
            }
            this.$router.push({name: 'chat', params: data})
        },
        limitFriend(){
            this.$router.push('limitFriend')
        }
    
       
        
      },
     

  }
</script>
<style lang="scss" scoped>
.head_page{
    width:100%;
    height:100%;
    position: absolute;
    .headInfo{
        // height:300px;
        background: #fff;
        margin-bottom: 10px;
        .headImg{
            padding:20px 10px 20px 20px;
            // padding-left: 20px;
            display: flex;
            border-bottom:1px solid #ccc;
            // padding-bottom: 10px;
            .icon{
                width:60px;
                height:60px;
                // background: #000;
                border-radius: 5px;
                margin-right: 15px;
            }
            .info{
               .username{
                   font-size: 14px;
                   color:#777;
               } 
               .remark{
                   font-size: 18px;
                   font-weight: bold;
                   color:#000;
               }
               .tel{
                  font-size: 16px;
                   font-weight: bold; 
               }
               .wx{
                   font-size: 14px;
                   color:#ccc;
               }
               
            }
        }
        .bz_bq{
            // width:100%;
            height:50px;
            padding:0 10px;
            font-size: 14px;
            flex-direction: row;
            justify-content: space-between;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
        }
    }
    .send{
        width:100%;
        height:50px;
        line-height: 50px;
        // padding:20px;
        text-align: center;
        font-size: 14px;
        // display: flex;
        // align-items: center;
        background: #fff;
        border-bottom: 1px solid #ccc;
    }
}

</style>
